<template>
  <div ref="lineRef" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { ref, shallowRef, watch, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import dayjs from "dayjs";
import utc from 'dayjs/plugin/utc'
import timezone  from 'dayjs/plugin/timezone'
import { numberFormat } from '@/utils/index.js'

dayjs.extend(utc)
dayjs.extend(timezone)
// dayjs.tz.setDefault("America/New_York")

const lineRef = ref(null);
const chartInstance = shallowRef(null) // 得用shallowRef,否则又bug
const currentMoveId = ref(null)
const currentTime = ref('1min')
const listData = ref([])

const emits = defineEmits(['change'])



onMounted(() => {
  initData()
});

onUnmounted(() => {
  if (chartInstance.value) {
    chartInstance.value.dispose();
  }
});

const initData = () => {
  chartInstance.value = echarts.init(lineRef.value);
  chartInstance.value.showLoading({
    text: '',
    maskColor: 'rgba(23, 29, 51, 0.8)',
    color: '#f0d180',
  })
  window.addEventListener('resize',() => {
    chartInstance.value.resize()
  })
};

const setOption = (data = [], time = '1min') => {
  currentTime.value = time
  listData.value = []
  for (let i = 0; i < data.length; i++) {
      listData.value.push([data[i].id,data[i].close])
  }
  chartInstance.value.hideLoading()
  // 绘制图表
  chartInstance.value.setOption({
    backgroundColor: "transparent",
    grid: {
      left: "0%",
      right: "2%",
      top: "5%",
      bottom: "2%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      showContent: false,
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
        lineStyle: {
          type: "dashed",
        },
        label: {
          backgroundColor: "#ffffff",
          color: "#57606f",
          fontSize: 9,
          formatter: (e) => {
            let value = Number(e.value)
              if(e.axisDimension === 'x') {
                if(currentMoveId.value !== value) {
                   currentMoveId.value = value
                  let list = data.filter(item => item.id * 1000 === value)
                  if(list.length > 0) {
                    emits('change',list[0])
                  }
                }
                  return dayjs(value).tz("Asia/Hong_Kong").format('MM/DD HH:mm')
              }else {
                return numberFormat(value,2)
              }
            
          }
        },
      },
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          color: "#bdc3c7",
          fontSize: 9,
          formatter: (value) => {
            return dayjs(Number(value)).tz("Asia/Hong_Kong").format('MM/DD HH:mm')
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            // x轴线颜色
            color: "rgba(255,255,255,.1)",
            width: 0.5,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 0.5,
            type: "solid",
          },
          interval: 5, // 表示隔几个显示
        },
      },
    ],
    yAxis: [
      {
        show: true,
        type: "value",
        position: "right",
        min: "dataMin",
        axisLabel: {
          formatter: "{value}",
          color: "#bdc3c7",
          fontSize: 9,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            // x轴线颜色
            color: "#000000",
            width: 1,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 0.5,
            type: "solid",
          },
        },
      },
    ],
    dataZoom: [
      {
        type: "inside",
        xAxisIndex: [0],
        filterMode: 'filter', // 设定为 'filter' 从而 X 的窗口变化会影响 Y 的范围。
        start: 60,
        end: 100
      }
    ],
    series: [
      {
        name: "",
        type: "line",
        stack: "总量",
        symbol: "emptyCircle",
        smooth: true,
        showSymbol: false,
        symbolSize: 2,
        itemStyle: {
          normal: {
            color: "rgba(240, 209, 148, 1)",
            lineStyle: {
              color: "#FFC312",
              width: 1,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.05,
                  color: "rgba(240, 209, 148, 0)",
                },
                {
                  offset: 1,
                  color: "rgba(240, 209, 148, 0.8)",
                },
              ]),
            },
          },
        },
        markPoint: {
          itemStyle: {
            normal: {
              color: "red",
            },
          },
        },
        data: listData.value,
      },
    ],
  });
};

defineExpose({
  setOption,
});
</script>

<style lang="scss" scoped>
</style>